Basic 유용민 sprint3 #97
Conversation
GANGYIKIM
left a comment
GANGYIKIM
left a comment
There was a problem hiding this comment.
용민님 3번째 PR 제출 고생하셨습니다~
반응형 작업을 하다보면 생각보다 어려운 점이 많은데 잘 처리하신 것 같아요!
다음 미션 제출도 화이팅입니다!
-
React에 들어가기 전까지는 React-유용민이 아니라 Basic-유용민을 base branch로 해서 PR 올려주세요~
-
PR 올려주실 때 구현하셨다고 체크하신 것을 보면서 리뷰하고 있습니다. 다음부터 심화 요구사항을 미구현하셨으면 체크하지 말고 올려주세요~
-
비밀번호 인풋에 있는 눈 모양은 추후 입력한 비밀번호를 보이고 안 보이게 하는 기능이 들어갈 예정이니 버튼으로 작성해주세요~
-
모바일 버전에서 메인 화면 부분 footer가 약간 어려웠습니다. display:flex로 처리했었는데, codeit 부분만 아래로 내리려니 media query 부분에서 html을 수정해야 할 거 같다는 생각이 들었습니다. 그래서 일단 postion: absolute로 아래로 내렸는데, 다른 좋은 방법이 있었을지 궁금합니다.:
absolute 를 사용하게 되면 브라우저에서 렌더링 시 위치를 계산해야 하는 일이 추가됩니다~
꼭 필요한 경우가 아니라면 지양하시는 것이 좋아요. html 구조를 수정하시거나 현 html 구조를 유지하시고 display: grid 로 처리하시면 좋을 것 같습니다!
| } | ||
| } | ||
|
|
||
| @media (max-width: 767px) and (min-width: 375px) { |
There was a problem hiding this comment.
💊 제안
min-width가 조건에 걸려있어 375px 미만으로 화면이 작아지게 되면 PC 스타일이 적용되네요~
body에 min-width: 375px를 추가하셔서 해당 사이즈 미만으로 작아지게 되면 가로 스크롤이 생기게 해주시거나
아니라면 min-width를 조건문에서 빼주시는 것을 추천드려요~
| } | ||
| } | ||
|
|
||
| @media (max-width: 765px) and (min-width: 365px) { |
There was a problem hiding this comment.
❗️ 수정요청
다른 css 파일의 브레이크 포인트와 다른 화면 사이즈를 조건으로 가지고 있네요~
// ex: nav.css
@media (max-width: 767px) and (min-width: 375px) {아예 다른 브레이크 포인트면 모를까 비슷한데 다른 크기라서 헷갈리니 하나로 통일해주세요~
| required | ||
| /> | ||
| <input type="submit" value="회원가입" id="login-submit" /> | ||
| <button type="submit" id="login-submit">회원가입입</button> |
There was a problem hiding this comment.
❗️ 수정요청
| <button type="submit" id="login-submit">회원가입입</button> | |
| <button type="submit" id="login-submit">회원가입</button> |
| img { | ||
| width: 100%; | ||
| } |
There was a problem hiding this comment.
💊 제안
지금 배포 사이트에서 브라우저의 높이를 줄여보면 배너의 이미지가 상단 영역을 넘어 올라옵니다~
img 태그의 width 속성을 100% 으로 해주셔서 이미지의 비율을 유지한채로 height가 늘어났기 때문입니다.
아래처럼 height 속성을 기준으로 잡아주시는 것을 추천드려요!
| img { | |
| width: 100%; | |
| } | |
| img { | |
| height: 100%; | |
| } |
There was a problem hiding this comment.
❗️ 수정요청
.total-container 태그의 height: 100vh 속성으로 인해 브라우저 높이가 작아졌을 시 내부 콘텐츠가 보이지 않네요~
확인 후 수정해주세요~
| #no-eye { | ||
| position: absolute; |
There was a problem hiding this comment.
❗️ 수정요청
해당 아이콘의 위치가 디자인과 다르네요~
추후 버튼으로 변경하시고 위치를 디자인과 비슷하게 변경하시는 것을 추천드립니다!
There was a problem hiding this comment.
❗️ 수정요청
메타 태그를 추가하셨다고 체크하셨는데 보이지 않네요!
메타태그가 제대로 되어 있는지 확인 하거나 메타 태그를 생성해주는 사이트들이 있습니다.
확인해보시고 메타태그를 추가해보세요~
2 participants
요구사항
기본
공통
랜딩 페이지
Tablet 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 24px, “로그인” 버튼 오른쪽 여백 24px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
Mobile 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 16px, “로그인” 버튼 오른쪽 여백 16px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
화면 영역이 줄어들면 “Privacy Policy”, “FAQ”, “codeit-2024”이 있는 영역과 SNS 아이콘들이 있는 영역의 간격이 줄어듭니다.
로그인, 회원가입 페이지 공통
심화
주요 변경사항
스크린샷
멘토에게
display:flex로 처리했었는데,codeit부분만 아래로 내리려니 media query 부분에서 html을 수정해야 할 거 같다는 생각이 들었습니다. 그래서 일단postion: absolute로 아래로 내렸는데, 다른 좋은 방법이 있었을지 궁금합니다.